<template>
    <div class="container-fluid ">
        <TopBar></TopBar>
        <div class="box">
            <div class="select-box">
                <br>
                <br><br>
                <nav class="navbar navbar-expand-lg">
                    <div class="collapse navbar-collapse  nav-bg" id="navbarScroll">
                        <div class="collapse navbar-collapse nav-bg" id="navbarNavAltMarkup">
                            <div class="navbar-nav">
                                <span class="nav-link active" @click="getArticlesList('文章','')">{{$t('communityPage.featuredarticles')}}</span>
                                <span class="nav-link active"  @click="getArticlesList('问题','')">{{$t('communityPage.qa')}}</span>
                                <!-- <span class="nav-link active" @click="getHotList()">{{$t('communityPage.focusevent')}}</span> -->
                            </div>
                        </div>
                        <span style="color: yellow; text-decoration: none;margin-right:30px">{{$t('communityPage.allNum')}}{{articleStore.articleList.page_all_num}}</span>
                        <form class="d-flex" role="search">
                            <input class="form-control me-2" v-model="getArticlesForm.key_words" type="search" :placeholder="$t('communityPage.searchSome')" aria-label="Search">
                            <button class="btn btn-primary" type="submit" @click="getArticlesList(getArticlesForm.type,getArticlesForm.key_words)">
                                <img style="width:24px;height:24px" src="../assets/icons/search.svg" alt="PASSLINK" />
                            </button>
                        </form>
                    </div>
                </nav>
            </div>

            <!-- 目录区 -->
            <div class="directory-box" >
                <TransitionGroup name="article_list" tag="div">
                    <div v-for="article in articleStore.articleList.list" :key="article.article_id">
                        <div @click="goArticleDetails(article)">
                            <Article :article="article"></Article>
                        </div>
                        
                    </div>
                </TransitionGroup>
            </div>
       
            <br>
            <!-- 分页-->
            <div  v-show="page_navigation_show" class="pagination-box">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item" @click="getArticlesPage(getArticlesForm.page_now-1)">
                            <a class="page-link"  aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item" v-for="page_index in  page_counts ">
                            <a class="page-link" @click="getArticlesPage(page_index)">{{page_index}}</a>
                        </li>
                        <li class="page-item" @click="getArticlesPage(getArticlesForm.page_now+1)">
                            <a class="page-link"  aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <BottomBar></BottomBar>
    </div>
</template>
<script setup lang="ts">
import {GetListRequestData} from '../api/article/types'
import { ArticleStore } from '../store/articelStore/index'
import {ref,reactive,watch} from "vue"
import { useRouter } from 'vue-router'
import toast from "../components/Toast/index"

const router = useRouter() 
const articleStore = ArticleStore()
const page_navigation_show = ref(false)
const page_counts = ref(0)
//获取列表表单参数
const getArticlesForm:GetListRequestData = reactive({
    page_now: 1,
    page_size: 15,//每页15篇
    type: "",
    tags: "",
    key_words: ""
})

//文章详情页面
function goArticleDetails(article:any) {
  //跳转,传递文章id
   //直接存储，方便取
   articleStore.article_now = article
    router.push({
        path: 'articleDetails'
    })
}

//监控页数

watch(()=>articleStore.articleList,()=>{
    if(articleStore.articleList.page_all_num > getArticlesForm.page_size){
         page_navigation_show.value = true;
         page_counts.value = Math.ceil(articleStore.articleList.page_all_num/getArticlesForm.page_size)
         console.log("页面总数"+ page_counts.value)
        
    }
})
//获取热点
// function getHotList(){


// }

//通过分页获取文章
function getArticlesPage(page_index:number){
    if(getArticlesForm.page_now === page_index){
        return
    }
    getArticlesForm.page_now = page_index
    if(page_index < 1 ){
        getArticlesForm.page_now = 1
        toast.showToast({msg:"已经是第一页了",type:"warning"})
        return
    }
    if(page_index > page_counts.value){
        getArticlesForm.page_now = page_counts.value
        toast.showToast({msg:"已经是最后一页了",type:"warning"})
        return
    }

    articleStore.getArticles(getArticlesForm)
    console.log("page_index : " + page_index)
    console.log("page_now : " +  getArticlesForm.page_now)
 
}
 

//获取文章
 function getArticlesList(type:string,key_words:string){
    if(key_words.length>20){
        toast.showToast({msg:"搜索最大字段仅限20以内",type:"error",mask:false})
        return
    }
    
    getArticlesForm.key_words = key_words
    getArticlesForm.type = type
    articleStore.getArticles(getArticlesForm);
}

//获取文章列表
getArticlesList("文章","");

</script>
<style lang="scss" scoped>

@media screen and (max-width: $passlink-media-max-width-5) {
    
 
    .select-box{
        display: none;
    }
    
  }




.container-fluid {
    background-color: $passlink-bg-color;
    .box {
        width:100%;
        background-color: $passlink-bg-color;
        height: auto;
        margin: auto;
        .nav-bg {
            background-color: $passlink-bg-color;
            span {
                color: $passlink-font-color-white;
                font-size: $passlink-font-size18;
                font-weight: lighter;
            }
            span:hover {
                color: $passlink-font-color-yellow;
                text-decoration: underline;
            }
        }
        .directory-box {
            width:100%;
            background-color: $passlink-bg-color;
            min-height: 600px;
            .article_list-move,
            /* 对移动中的元素应用的过渡 */
            .article_list-enter-active,
            .article_list-leave-active {
                transition: all 0.5s ease;
            }
            .article_list-enter-from,
            .article_list-leave-to {
                opacity: 0;
                transform: translateX(20px);
            }
            /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
            .article_list-leave-active {
                position: absolute;
            }
        }
        .pagination-box {
            display: flex;
            justify-content: center;
            width: 175px;
            margin: auto;
        }
    }
}
</style>
